<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'收钱码',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="diandiandian" @click="dian">
						<view class="selectcontent" v-show="selectshow" >
							<view class="topbox">
								<view class="flexleft itemselect" @click.stop="shoukuan">
									<view class="leftimage margin_right">
										<image src="../../../static/image/system/payment.png" mode=""></image>
									</view>
									<view>收款明细</view>
								</view>
							</view>
							<view class="sanjiao"></view>
						</view>
					</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="mainpadding ffffff xuanze">
				<view class="inputbox margin_top">
					<view class="flexleft flex1">
						<view class="strongtext margin_right">客户</view>
						<view class="bitian">*</view>
					</view>
					<view class="itembox flexbetween">
						<input type="text" placeholder="点击选择客户">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="inputbox margin_top">
					<view class="flexleft flex1">
						<view class="strongtext margin_right">收款人</view>
						<view class="bitian">*</view>
					</view>
					<view class="itembox flexbetween ">
						<input type="text" placeholder="点击选择收款人">
						<view class="righticon2"></view>
					</view>
				</view>
			</view>
			<view class="margin_top ffffff erweimabox">
				<image class="img" src="../../../static/image/news/boy.png" mode=""></image>
				<view class="zhifubtn">
					更换支付方式
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 下拉菜单
				selectshow: false,
			}
		},
		onLoad() {
			uni.hideTabBar(); //隐藏tab
		},
		methods: {
			dian() {
				this.selectshow = this.selectshow == false ? true : false
			},
			shoukuan() {
				this.selectshow = false
				uni.navigateTo({
					url:"/pages/workbench/caiwu/shoukuanmx"
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.xuanze {
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
  .zhifubtn{
	  margin-top: 52rpx;
	  padding: 20rpx 66rpx;
	  font-size: 28rpx;
	  font-family: PingFang SC-Medium, PingFang SC;
	  font-weight: 500;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  border-radius: 74rpx 74rpx;
	  color: #0BBDCB;
	  border: 2rpx solid #0BBDCB;
  }
	.img {
		width: 404rpx;
		height: 404rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		 image{
			width: 100%;
			height: 100%;
		}
	}

	.erweimabox {
		padding: 56rpx 142rpx 50rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	// 定位点点点
	.diandiandian {
		position: relative;
	}

	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 250rpx;
		mix-width: 250rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}

	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}

	.leftimage {
		width: 34rpx;
		height: 34rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.itemselect {
		padding: 20rpx 30rpx;
	}

	.flex1 {
		flex: 3;
	}

	.inputbox {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.itembox {
		flex: 7;
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}
</style>
